<script setup lang="ts">
import useRole from "@/hook/useRole.ts";
import EditRole from "@/views/permission/rolepopups/EditRole.vue";
import AddRole from "@/views/permission/rolepopups/AddRole.vue";
import {Delete, Edit} from "@element-plus/icons-vue";
import {useLoginStore} from "@/store/usersLoginStore.ts";

const loginStore = useLoginStore();
const {
  rolesStore,
  search,
  formatCATTime,
  formatUPDTime,
  add,
  edit,
  del,
  handleCurrentChange,
  handleSizeChange,
  total,
  selected,
  selectedall,
  handleBatchDelete
} = useRole();


</script>
<template>
  <div style="height: 100%;width: 100%">
    <el-container>
      <el-main>
        <el-form :inline="true" :model="rolesStore.filteredData" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="rolesStore.filteredData.name" placeholder="角色名称" clearable/>
          </el-form-item>
          <el-form-item label="角色状态">
            <el-radio-group v-model="rolesStore.filteredData.isUsable">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table-buttons">
          <el-button type="primary" @click="add" v-if="loginStore.buttonPermissions.RoleCreate">新增角色</el-button>
          <el-button type="primary" @click="handleBatchDelete" v-if="loginStore.buttonPermissions.RoleBatchDel">批量删除
          </el-button>
        </div>
        <el-table :data="rolesStore.roleList"
                  @select="selected"
                  @select-all="selectedall"
                  border style="width: 100%">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="ID" label="ID" header-align="center" align="center" width="55"></el-table-column>
          <el-table-column prop="name" label="角色名称" header-align="center" align="center"
                           width="180"></el-table-column>
          <el-table-column prop="describe" label="角色描述" header-align="center" align="center"></el-table-column>
          <el-table-column prop="isUsable" label="角色状态" header-align="center" align="center">
            <template #default="scope">
              <el-tag size="large" :type="scope.row.isUsable === 1 ? 'success' : 'danger'">
                {{ scope.row.isUsable === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建者" header-align="center" align="center">
            <template #default="scope">
              <el-tag type="primary" size="large">{{ scope.row.creator.user_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="modifier" label="更新者" header-align="center" align="center">
            <template #default="scope">
              <el-tag type="primary" size="large">{{ scope.row.modifier.user_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="CreatedAt" label="创建时间" :formatter="formatCATTime"
                           header-align="center" align="center"></el-table-column>
          <el-table-column prop="UpdatedAt" label="更新时间" :formatter="formatUPDTime"
                           header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" header-align="center" align="center"
                           v-if="loginStore.buttonPermissions.RoleEdit ||loginStore.buttonPermissions.RoleDel ">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" @click="edit(scope.row)"
                         :disabled="scope.row.name==='超级管理员'" v-if="loginStore.buttonPermissions.RoleEdit"
                         circle>
              </el-button>
              <el-button type="danger" @click="del(scope.row)" :disabled="scope.row.name==='超级管理员'" :icon="Delete"
                         v-if="loginStore.buttonPermissions.RoleDel"
                         circle>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination
              v-model:current-page="rolesStore.reqData.currentPage"
              v-model:page-size="rolesStore.reqData.pageSize"
              :page-sizes="rolesStore.page_size"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <EditRole v-if="rolesStore.openEdit"/>
    <AddRole v-if="rolesStore.openAdd"/>
  </div>

</template>

<style scoped lang="scss">
.table-buttons {
  margin-bottom: 10px; /* 或者您希望的其他值 */
}

.pagination-wrapper {
  display: flex; // 启用Flexbox
  justify-content: flex-end; // 子项靠右对齐
  margin-top: 20px; // 设置分页组件距离上边表格的距离
}
</style>